/**
 * @description Operation Log Component
 */

import React, { Component } from 'react'
import Container from '@/components/common/Container'
import { Button, Input, Table } from 'antd'
import { FormattedMessage } from 'react-intl'
import Api from '@api'

const breadcrumbConfig = [
  {
    path: '/dashboard',
    breadcrumbName: <FormattedMessage id="i18n_common_home_page" />
  },
  {
    path: '/global-param',
    breadcrumbName: <FormattedMessage id="i18n_menu_system_manager_label" />
  },
  {
    path: '',
    breadcrumbName: <FormattedMessage id="i18n_menu_operation_log_label" />
  }
]

export default class OrderMgmt extends Component {
  constructor(props) {
    super(props)
    this.state = {
      filterDropdownVisible: false,
      data: [],
      searchText: '',
      filtered: false,
      isLoading: false,
      // Cancel all subscriptions and asynchronous tasks Flag
      isMounted: false
    }
    this.onInputChange = this.onInputChange.bind(this)
    this.onSearch = this.onSearch.bind(this)
  }
  componentDidMount() {
    this.setState({ isMounted: true, isLoading: true })
    // Get data
    Api.get('orders', {}, true).then(
      res => {
        res &&
          this.state.isMounted &&
          this.setState({ data: res, isLoading: false })
      },
      () => {
        this.setState({ isLoading: false })
      }
    )
  }
  componentWillUnmount() {
    // Cancel all subscriptions and asynchronous tasks
    this.setState({ isMounted: false })
  }
  onInputChange(e) {
    this.setState({ searchText: e.target.value })
  }
  onSearch() {
    const { searchText } = this.state
    const reg = new RegExp(searchText, 'gi')
    this.setState({
      filterDropdownVisible: false,
      filtered: !!searchText,
      data: this.state.data
        .map(record => {
          const match = record.name.match(reg)
          if (!match) {
            return null
          }
          return {
            ...record,
            name: (
              <span>
                {record.name
                  .split(
                    new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i')
                  )
                  .map(
                    (text, i) =>
                      text.toLowerCase() === searchText.toLowerCase() ? (
                        <span key={i} className="highlight">
                          {text}
                        </span>
                      ) : (
                        text
                      )
                  )}
              </span>
            )
          }
        })
        .filter(record => !!record)
    })
  }
  render() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        filterDropdown: (
          <div className="custom-filter-dropdown">
            <Input
              ref={ele => (this.searchInput = ele)}
              placeholder="Search name"
              value={this.state.searchText}
              onChange={this.onInputChange}
              onPressEnter={this.onSearch}
            />
            <Button type="primary" onClick={this.onSearch}>
              Search
            </Button>
          </div>
        ),
        filterDropdownVisible: this.state.filterDropdownVisible,
        onFilterDropdownVisibleChange: visible => {
          this.setState(
            {
              filterDropdownVisible: visible
            },
            () => this.searchInput && this.searchInput.focus()
          )
        }
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        filters: [
          {
            text: 'London',
            value: 'London'
          },
          {
            text: 'New York',
            value: 'New York'
          }
        ],
        onFilter: (value, record) => record.address.indexOf(value) === 0
      }
    ]
    return (
      <Container breadcrumb={breadcrumbConfig}>
        <Table
          loading={this.state.isLoading}
          columns={columns}
          dataSource={this.state.data}
        />
      </Container>
    )
  }
}
